<template>
    <div id="echart">
        <div id="charts">
            <div  class="main"></div>
        </div>
        
        <div class="points-wrapper">
                <div class="point" v-for = "item in [LISTEchart[0], LISTEchart[1], LISTEchart[3], LISTEchart[4], LISTEchart[2]]">{{ item }}次</div>
                <span class="rightCount">正确组数：{{ rightNum }}组</span>
                <div class="yuandian">0</div>
                </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {
        errFun,
    } from "../../tools.js";
    // import api from "../../api"
    export default {
        data() {
            return {
                // value: ,
                maxValue: 24,
            }
        },
        props: ["LISTEchart", "rightarr", "idx", 'rightNum'],
        methods: {
            //获取数组的数据
            // getEchart() {
            //     var that = this;
            //     api.getResult(this.$route.params.id).then(function(result) {
            //         console.log(result.data.result.dataAnalyses);
            //         // that.value = result.data.result.dataAnalyses;
            //     }, errFun)
            // },
            //绘制echart
            setEc(dom) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(dom);

                // 绘制图表
                myChart.setOption({
                    //设置背景色
                    backgroundColor: "none",
                    radar: [{
                        indicator: [{
                            text: '身体',
                            max: this.rightarr[0],
                        }, {
                            text: '左臂',
                            max: this.rightarr[1],
                        }, {
                            text: '左腿',
                            max: this.rightarr[3],
                        }, {
                            text: '右腿',
                            max: this.rightarr[4],
                        }, {
                            text: '右臂',
                            max: this.rightarr[2],
                        }],
                        radius: 110,
                        center: ['46.333%', '48.333%'],
                        name: {
                            textStyle: {
                                color: "#fff",
                                fontSize: 14
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: "none",
                            },
                            lineStyle: {
                                color: "#888",
                            }
                        },
                    }],
                    series: [{
                        type: 'radar',
                        //取消节点的样式
                        symbol: "none",

                        data: [{
                            value: [(this.LISTEchart[0] >= this.rightarr[0] ? this.rightarr[0] : this.LISTEchart[0]), (this.LISTEchart[1] >= this.rightarr[1] ? this.rightarr[1] : this.LISTEchart[1]), (this.LISTEchart[3] >= this.rightarr[3] ? this.rightarr[3] : this.LISTEchart[3]), (this.LISTEchart[4] >= this.rightarr[4] ? this.rightarr[4] : this.LISTEchart[4]), (this.LISTEchart[2] >= this.rightarr[2] ? this.rightarr[2] : this.LISTEchart[2])],
                            //填充的颜色
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
                                        color: '#ffb901',
                                        offset: 0
                                    }, {
                                        color: '#ffb901',
                                        offset: 1
                                    }])
                                }
                            },
                            //边框的颜色
                            lineStyle: {
                                normal: {
                                    color: "transparent",
                                    opacity: 0.6
                                }
                            },
                            //小圆点的颜色
                            itemStyle: {
                                normal: {
                                    borderColor: "transparen",
                                    color: "red",
                                    //设置字体的颜色
                                    // label: {
                                    //     show: true,
                                    //     textStyle: {
                                    //         color: "yellow"
                                    //     }
                                    // }
                                },

                            },


                        }]
                    }]
                })
            }
        },
        mounted() {
            //绘制echart
            var dom = document.querySelectorAll(".main")
            this.setEc(dom[this.idx]);
        }
    }
</script>
<style>
    #echart {
        position: relative;
        width: 100%;
        height: 300px;
        .main {
            width: 100%;
            height: 300px;
            border-bottom: 1px solid #262d3f;
        }
        .rightCount {
            color: #feb612;
            position: absolute;
            top: 5px;
            /*width: 100px;*/
            left: 0;
        }
        .points-wrapper {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            font-size: 14px;
        }
        .points-wrapper div {
            position: absolute;
            width: 40px;
            height: 20px;
        }
        .points-wrapper div:nth-child(1) {
            position: absolute;
            top: 4px;
            left: 51.333%;
        }
        .points-wrapper div:nth-child(2) {
            position: absolute;
            top: 117px;
            left: 6%;
        }
        .points-wrapper div:nth-child(3) {
            position: absolute;
            top: 256px;
            left: 19%;
        }
        .points-wrapper div:nth-child(4) {
            position: absolute;
            top: 256px;
            left: 65%;
        }
        .points-wrapper div:nth-child(5) {
            position: absolute;
            top: 117px;
            left: 78%;
        }
        .points-wrapper .yuandian {
            position: absolute;
            top: -1%;
            left: 1%;
            right: 0;
            bottom: 0;
            margin: auto
        }
    }
</style>